import { createElement, render, Component } from "./toy-react";

import "./style.css";

const MyFuncComp = function (props) {
    return (
        <div>
            <h1>Hello {props.name}!</h1>
        </div>
    )
}

class MyClassComp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }

    handleClick() {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <h1>Hello {this.props.header}!</h1>
                {this.children}
                <div>{this.state.count}</div>
                <button onClick={() => this.handleClick()}>Increment</button>
            </div>
        )
    }
}



const app = <div id='app'>
    <ul>
        <li>
            <MyFuncComp name={"Functionnal Comp"} className={'highlight'}></MyFuncComp>
        </li>
        <li>
            <MyClassComp header={"Class Comp"}>
                <p>This is the content</p>
            </MyClassComp>
        </li>
        <li>
            <p className={'highlight'}>
                This is a plain text.
            </p>
        </li>
    </ul>
</div>;

render(app, document.body);